<template>
  <div class="style-ruler mb-ruler" id="mb-ruler">
    <!-- 水平方向 -->
    <RulerWrapper :vertical="false" :width="width" :height="thick" :isShowReferLine="isShowReferLine" :thick="thick"
      :start="startX" :lines="horLineArr" :selectStart="shadow.x" :selectLength="shadow.width" :scale="scale"
      :palette="palette" :canvasConfigs="canvasConfigs" @onLineChange="handleLineChange" />
    <!-- 竖直方向 -->
    <RulerWrapper :vertical="true" :width="thick" :height="height" :isShowReferLine="isShowReferLine" :thick="thick"
      :start="startY" :lines="verLineArr" :selectStart="shadow.y" :selectLength="shadow.height" :scale="scale"
      :palette="palette" :canvasConfigs="canvasConfigs" @onLineChange="handleLineChange" />
    <a class="corner iconfont" :class="cornerActiveClass" :style="cornerStyle" @click="onCornerClick"></a>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import RulerWrapper from "./ruler-wrapper.vue";

const DEFAULTMENU = {
  bgColor: "#fff",
  dividerColor: "#DBDBDB",
  listItem: {
    textColor: "#415058",
    hoverTextColor: "#298DF8",
    disabledTextColor: "rgba(65, 80, 88, 0.4)",
    bgColor: "#fff",
    hoverBgColor: "#F2F2F2",
  },
};
export default defineComponent({
  name: "rule",
  components: { RulerWrapper },
  props: {
    scale: {
      type: Number,
      default: 1,
    },
    ratio: {
      type: Number,
      default: window.devicePixelRatio || 1,
    },
    thick: {
      type: Number,
      default: 16,
    },
    width: Number,
    height: Number,
    startX: {
      type: Number,
      default: 0,
    },
    startY: {
      type: Number,
      default: 0,
    },
    shadow: {
      type: Object,
      default: () => {
        return {
          x: 200,
          y: 100,
          width: 200,
          height: 400,
        };
      },
    },
    horLineArr: {
      type: Array,
      default: () => {
        return [100, 200];
      },
    },
    verLineArr: {
      type: Array,
      default: () => {
        return [100, 200];
      },
    },
    cornerActive: Boolean,
    lang: String,
    isOpenMenuFeature: false,
    handleShowRuler: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
    isShowReferLine: {
      type: Boolean,
      default: true,
    },
    handleShowReferLine: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
    palette: {
      type: Object,
      default: () => {
        return {
          bgColor: "rgba(225,225,225, 0)", // ruler bg color
          longFgColor: "#BABBBC", // ruler longer mark color
          shortFgColor: "#C8CDD0", // ruler shorter mark color
          fontColor: "#7D8694", // ruler font color
          shadowColor: "#E8E8E8", // ruler shadow color
          lineColor: "#EB5648",
          borderColor: "#DADADC",
          cornerActiveColor: "rgb(235, 86, 72, 0.6)",
          menu: DEFAULTMENU,
        };
      },
    },
  },
  emits: ["onCornerClick", "handleLine"],
  setup(props, ctx) {
    const vertical = ref(true);
    const cornerActiveClass = computed(() => {
      return props.cornerActive ? "icon-line-show" : "icon-line-hide";
    });
    const cornerStyle = computed(() => {
      return {
        backgroundColor: props.palette.bgColor,
        width: `${props.thick}px`,
        height: `${props.thick}px`,
        borderRight: `1px solid ${props.palette.borderColor}`,
        borderBottom: `1px solid ${props.palette.borderColor}`,
      };
    });
    const canvasConfigs = computed(() => {
      const {
        bgColor,
        longFgColor,
        shortFgColor,
        fontColor,
        shadowColor,
        lineColor,
        borderColor,
        cornerActiveColor,
      } = props.palette;
      return {
        ratio: props.ratio,
        bgColor,
        longFgColor,
        shortFgColor,
        fontColor,
        shadowColor,
        lineColor,
        borderColor,
        cornerActiveColor,
      };
    });
    const onCornerClick = (e) => {
      ctx.emit("onCornerClick", e);
    };
    const handleLineChange = (arr, vertical) => {
      const newLines = vertical
        ? { h: props.horLineArr, v: [...arr] }
        : { h: [...arr], v: props.verLineArr };
      ctx.emit("handleLine", newLines);
    };
    return {
      vertical,
      cornerStyle,
      canvasConfigs,
      cornerActiveClass,
      onCornerClick,
      handleLineChange,
    };
  },
});
</script>

<style lang="less" scoped>
.style-ruler {
  position: absolute;
  width: 100%; /* scrollbar width */
  height: 100%;
  z-index: 3; /* 需要比resizer高 */
  pointer-events: none;
  font-size: 12px;
  overflow: hidden;

  span {
    line-height: 1;
  }
}

.corner {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: content-box;
  text-align: center;
  line-height: 22px;
  &:hover {
    color: #ffffff;
  }
}

.ruler {
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
</style>
